<template>
	<div class="activity-edit" v-loading="loading">
		<x-line :border="true" :title="attribute.name" :icon="attribute.iconName" style="font-size:16px" v-if="!isEdit"></x-line>
		<el-alert show-icon class="alert" :closable="false" type="success" :description="attribute.intro">
		</el-alert>
		<el-form ref="form" class="activity-from" v-if="async">
			<el-form-item label="活动是否开启" required>
				<el-switch v-model="viewModel.activity.isEnable" :maxlength="200" />
				<div class="help-back">设置{{attribute.name}}是否开启，活动只有开启以后才生效，关闭后活动失效。</div>
			</el-form-item>
			<el-form-item label="活动名称" v-if="isEdit===true" required>
				<el-input placeholder="请输入活动名称" v-model="viewModel.activity.name" :maxlength="20" class="base-title" />
				<div class="help-back">请设置{{attribute.name}}的名称，活动开启后，该名称会和标签颜色显示到商品详情页旁边。3-20个以内</div>
			</el-form-item>
			<el-form-item label="活动时间" v-if="attribute.isSupportTimeRang===true" required>
				<x-datetime-range v-model="viewModel.base.dateTimeRange" type="datetimerange"></x-datetime-range>
				<div class="help-back">请设置{{attribute.name}}活动的开始时间和结束时间,请精确到分钟。</div>
			</el-form-item>
			<el-form-item :label="'参与'+attribute.name+'库存'" v-if="attribute.isSupportMaxStock===true" required>
				<el-input-number v-model="viewModel.base.maxStock" :min="0" controls-position="right"></el-input-number>
				<div class="help-back">请设置{{attribute.name}}活动的最大库存，活动参与量达到最大库存后活动结束。<x-code>0表示最大库存不做限制</x-code>
				</div>
			</el-form-item>
		</el-form>
		<div class="activity-line">
			<zk-auto-form :serviceConfig="viewModel.autoForm" v-if="async" @saveForm="saveForm" ref="zkAutoForm"></zk-auto-form>
		</div>
	</div>
</template>


<script>
	import service from './service'
	import ala from 'ala'
	export default {
		props: {
			isEdit: {
				default: false
			},
			attribute: {}
		},
		data() {
			return {
				async: false,
				loading: true,
				viewModel: {},
				activity: {
					dataTime: [],
					buyerCount: 0
				}
			}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.loading = true
				let paramenter = {
					key: this.attribute.key,
					id: this.$ala.getId()
				}
				if (this.$route.query.ProductId) {
					paramenter.productId = this.$route.query.ProductId
				}

				if (this.$route.query.key) {
					paramenter.key = this.$route.query.key
				}

				this.viewModel = await this.$ala.httpGet('api/Activity/GetView', paramenter)
				this.async = true
				this.loading = false
			},
			async saveForm(models) {
				this.viewModel.setting = JSON.stringify(models)
				var response = await this.$ala.httpPost('Api/Activity/Save', this.viewModel)
				if (response) {
					this.$ala.toMessage(response)
				}
				if (this.$refs.zkAutoForm) {
					this.$refs.zkAutoForm.setSaveStatus(false)
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	@import "~./styles/edit.scss";
</style>